<template>
  <!--    id="member-list"-->
  <div id="contacts-book" style="display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; height: 100%">
    <div class="contacts-book-head" style="flex: none; display: flex; flex-direction: column; width: 100%">
      <contact-book-item
        id="member-me"
        :name="`${areaName}指挥中心`"
        :show-camera="false"
        :show-voice="false"
        style="padding: 0"
      />
      <a-input
        v-model:value="searchText"
        style="padding: 5px 8px; background: rgba(255, 255, 255, 0.1); color: #e9e9e9"
        placeholder="搜索姓名"
        @change="onSearchChange"
        @keyup.enter="onSearchChange"
      >
        <SearchOutlined slot="suffix" size="16" style="color: #e9e9e9" />
      </a-input>
    </div>
    <!-- member -->
    <a-collapse
      v-model:value="activeKey"
      :accordion="false"
      style="flex: auto; height: auto; min-height: 0; display: block; width: 100%; overflow: hidden auto"
    >
      <a-collapse-panel
        v-for="item of renderList"
        :key="item.title"
        :header="item.title"
        style="display: block; width: 100%"
      >
        <contact-book-item
          v-for="(subItem, index) of item.children"
          :key="subItem.name + index"
          :class="{ active: activeUserIds.indexOf(subItem.account) >= 0 }"
          :show-caller="activeUserIds.indexOf(subItem.account) < 0"
          :room-id="roomId"
          :onCallClick="onCallClick"
          :onCameraClick="onCameraClick"
          :onVoiceClick="onVoiceClick"
          style="padding: 0 0 0 20px"
          v-bind="subItem"
        />
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
import { debounce, get } from 'lodash-es';
import { useUserInfoStore } from '../../pinia/userInfo.js';
import { SearchOutlined } from '@ant-design/icons-vue';
import Input from 'ant-design-vue/es/input/index.js';
import Collapse from 'ant-design-vue/es/collapse/index.js';
import CollapsePanel from 'ant-design-vue/es/collapse/CollapsePanel.js';

import ContactBookItem from './contact-book-item.vue';
import { handleCommonRes } from '../../utils/resolver.js';
import { getVideoConnectionList } from '../../api/index.js';

export default {
  name: 'contacts-book',
  components: {
    [Input.name]: Input,
    [Collapse.name]: Collapse,
    [CollapsePanel.name]: CollapsePanel,
    SearchOutlined,
    ContactBookItem,
  },
  props: {
    roomId: { type: String, default: '' },
    activeUserIds: { type: Array, default: () => [] },
    getUserList: { type: Function, default: undefined },
    onCallClick: { type: Function, default: undefined },
    onCameraClick: { type: Function, default: undefined },
    onVoiceClick: { type: Function, default: undefined },
  },
  data() {
    return {
      activeKey: '',
      searchText: '',
      renderList: [],
      dataList: [],
    };
  },
  computed: {
    areaName() {
      const userInfoStore = useUserInfoStore();
      return userInfoStore.area_name || '';
    },
  },
  created() {
    this.getDataAsync();
  },
  methods: {
    async getDataAsync() {
      const userInfoStore = useUserInfoStore();
      const params = { area_code: userInfoStore.area_code };
      if (typeof this.getUserList === 'function') {
        this.dataList = await this.getUserList(params);
      } else {
        this.dataList = await handleCommonRes(getVideoConnectionList, params);
      }
      this.activeKey = get(this.dataList, '[0].title') || '';
      this.renderList = this.dataList;
    },
    onSearchChange: debounce(function () {
      const filter = (list, predicate) => {
        if (!list || !list.length) return [];
        return list.filter((item) => predicate(item));
      };
      const format = (text) => {
        return text ? String(text).trim().toLowerCase() : '';
      };
      const txt = format(this.searchText);
      if (!txt) {
        this.renderList = this.dataList;
        return;
      }
      this.renderList = this.dataList
        .map((item) => {
          return Object.assign({}, item, {
            children: filter(item.children, (subItem) => {
              return format(subItem.name).indexOf(txt) >= 0;
            }),
          });
        })
        .filter((item) => item.children && item.children.length);
      if (this.renderList && this.renderList.length) {
        this.activeKey = this.renderList.map((item) => item.title);
      }
    }, 300),
  },
};
</script>
